<script setup>
import {useCategoryStore} from '@/stores/categoryStore'
const categoryStore = useCategoryStore()

</script>
<template>
  <div class="home-category">
    <ul class="menu">
      <li v-for="item in categoryStore.categoryList" :key="item">
        <RouterLink to="/">{{item.name}}</RouterLink>
        <RouterLink v-for = "i in item.children.slice(0,2)" :key="i" to="/">{{i.name}}</RouterLink>
        <!-- 弹窗layer位置 -->
         <div class="layer">
          <h4>
            分类推荐<small>根据您的购买或浏览记录推荐</small>
          </h4>
          <ul>
            <li v-for = "i in item.goods" :key="i.id">
              <RouterLink :to="`/detail/${i.id}`">
                <img :src="i.picture" alt="" />
                <div class="info">
                  <p class="name ellipsis-2">
                    {{i.name}}
                  </p>
                  <p class="desc ellipsis-2">
                    {{i.desc}}
                  </p>
                  <p class="price"><i>￥</i>{{ i.price }}</p>
                </div>
              </RouterLink>
            </li>
          </ul>
         </div>
      </li>
    </ul>
  </div>
</template>
<style scoped lang='scss'>
// 根容器：左侧菜单的整体容器
.home-category {
  width: 250px; // 固定宽度（左侧菜单宽度）
  height: 500px; // 固定高度
  background: rgba(0, 0, 0, 0.8); // 深色半透明背景（突出菜单）
  position: relative; // 关键：作为弹层（.layer）的定位容器（子元素absolute会相对它定位）
  z-index: 99; // 确保菜单在页面其他元素上方（避免被遮挡）

  // 左侧菜单列表
  .menu {
    li { // 每个分类项（li）
      padding-left: 40px; // 左内边距（文字向右缩进，美观）
      height: 55px; // 固定高度（每个分类项占一行，高度一致）
      line-height: 55px; // 行高=高度，文字垂直居中

      // 鼠标悬停时的样式（分类项背景变色）
      &:hover {
        background: $xtxColor; // $xtxColor是主题色，hover时高亮
      }

      // 分类项中的链接（RouterLink渲染为a标签）
      a {
        margin-right: 4px; // 链接之间的间距
        color: #fff; // 白色文字（与深色背景对比）

        // 第一个链接（主分类）字体稍大
        &:first-child {
          font-size: 16px;
        }
      }

      // 弹层样式（核心）
      .layer {
        width: 990px; // 弹层宽度（比左侧菜单宽，展示更多内容）
        height: 500px; // 与左侧菜单高度一致
        background: rgba(255, 255, 255, 0.8); // 浅色半透明背景
        position: absolute; // 绝对定位：脱离文档流，相对于最近的relative父元素（.home-category）定位
        left: 250px; // 左侧距离=左侧菜单宽度（250px），刚好显示在菜单右侧
        top: 0; // 顶部对齐左侧菜单
        display: none; // 默认隐藏弹层
        padding: 0 15px; // 左右内边距（内容不贴边）

        // 弹层标题
        h4 {
          font-size: 20px;
          font-weight: normal; // 取消粗体
          line-height: 80px; // 行高=80px，标题区域高度固定

          small { // 副标题
            font-size: 16px;
            color: #666; // 灰色（次要信息）
          }
        }

        // 推荐商品列表
        ul {
          display: flex; // flex布局：商品项横向排列
          flex-wrap: wrap; // 换行：超出一行时自动折行

          li { // 每个商品项
            width: 310px; // 固定宽度（3个商品/行：310*3 + 15*2间距 = 990px，刚好填满弹层宽度）
            height: 120px; // 固定高度
            margin-right: 15px; // 右侧间距
            margin-bottom: 15px; // 底部间距
            border: 1px solid #eee; // 边框（分隔商品）
            border-radius: 4px; // 圆角
            background: #fff; // 白色背景（突出商品）

            // 第3、6、9...个商品项（每行最后一个）取消右侧间距
            &:nth-child(3n) {
              margin-right: 0;
            }

            a { // 商品链接（覆盖父元素的a样式）
              display: flex; // flex布局：图片+文字横向排列
              width: 100%; // 占满商品项宽度
              height: 100%; // 占满商品项高度
              align-items: center; // 垂直居中
              padding: 10px; // 内边距

              // 鼠标悬停商品项时的背景色（轻微变色，提示可点击）
              &:hover {
                background: #e3f9f4;
              }

              img { // 商品图片
                width: 95px;
                height: 95px; // 固定尺寸，保持一致
              }

              // 商品信息区
              .info {
                padding-left: 10px; // 与图片保持间距
                line-height: 24px; // 行高（控制文字间距）
                overflow: hidden; // 配合省略号样式

                .name { // 商品名称
                  font-size: 16px;
                  color: #666;
                }

                .desc { // 商品描述
                  color: #999; // 灰色（次要信息）
                }

                .price { // 商品价格
                  font-size: 22px;
                  color: $priceColor; // 价格色（通常为红色）

                  i { // 人民币符号
                    font-size: 16px; // 比价格小一点
                  }
                }
              }
            }
          }
        }
      }

      // 核心交互：鼠标悬停分类项时，显示对应的弹层
      &:hover {
        .layer {
          display: block; // 从隐藏（none）变为显示（block）
        }
      }
    }
  }
}
</style>
